<template>
  <Fragment>
    <div class="head-wrap borderBottom-1px">
      <div class="title left borderBottom-2px">{{title}}</div>
      <div class="operate right">                  
      </div>
    </div>
    <div class="content-wrap">
      <div class="chart-content">
        <div class="above">
          <div class="total-number-people-hospital">
            <div class="desc">在院总人数</div>
            <div class="num">122333 <span>人</span></div>
          </div>
        </div>
        <div class="bottom">
          <div class="mwnum">
            <div class="desc">男女患者</div>
            <div class="num">1223 <span>人</span> </div>
          </div>
          <div class="total-ospitalizations">
            <div class="desc">住院总人数</div>
            <div class="num">1223 <span>人</span></div>
          </div>
        </div>
      </div>                         
    </div>
    <img src="@/assets/images/card819.png" class="card819" alt="">
  </Fragment>
</template>

<script>
import { Fragment } from 'vue-fragment'
export default {
  name:'box-card-single-analysis1-huanzhetongji',
  components:{Fragment},
  props:{
    title:{
      type:String
    }
  }
}
</script>
<style lang="less" scoped>
.left{float: left;}
.right{float: right;}
.borderBottom-1px{
  border-bottom: .01rem solid #7787C7 ;
}
.borderBottom-2px{
  border-bottom: .02rem solid #7787C7 ;
}
.head-wrap{
    font-size: .16rem;
    color:#ffffff;
    overflow: hidden;
    .title{
      height: .26rem;
      line-height: .262rem;
    }
    .operate{
      span{
        height: .26rem;
        line-height: .26rem;
        display: inline-block;
        cursor: pointer;
        background: url('~@/assets/images/671.png') no-repeat center center;
        background-size: contain;
        padding: .01rem .2rem;
      }
      span.active{
        background: url('~@/assets/images/670.png') no-repeat center center;
        background-size: contain;
        padding: .01rem .2rem;
      }
    }
  }
  .content-wrap{
    width: 100%;
    height:calc( (100vh - 1.23rem) / 3 - .36rem) ;
    .chart-content{
      width: 100%;
      height:calc( (100vh - 1.23rem) / 3 - .36rem) ;
      float: left;
      overflow: hidden;
    }

    
    .above{
      width: 3.31rem;
      height: .87rem;
      margin-top:.4rem;   
      margin-left:.65rem;
      font-size: .14rem;
      background: url('~@/assets/images/icon_total_number.png') no-repeat;
      background-size: 70%;
      .total-number-people-hospital{
        padding-left: 1rem;
        padding-top: .12rem;
        .num{
          color:#ffffff;
          display:block;
          font-size: .2rem;
         
        }
        .desc{
          color:#69C4E3;
          display:block;
          
          font-size: .14rem;
        }
      }
    }
    .bottom{     
      margin-left:.65rem;
      margin-top:.1rem;
      font-size: .14rem;
      color:#ffffff;
      .mwnum{
        width: 1.65rem; 
        background: url('~@/assets/images/iocn_decorate.png') no-repeat;
        display: inline-block;
        padding-left:.5rem;
        .desc{
          padding-bottom: .2rem;
          padding-left:.15rem;
        }
        .num{
          padding-left:.1rem;
          font-size:.28rem;
          span{font-size:.14rem}
        }
      }
      .total-ospitalizations{
          width: 1.65rem;              
          background: url('~@/assets/images/iocn_decorate.png') no-repeat;
          display: inline-block;
          padding-left:.5rem;
          .desc{
            padding-bottom: .2rem;
            padding-left:.15rem;
          }
          .num{
            font-size:.28rem;
            span{font-size:.14rem}
            padding-left:.1rem;
          }
          
      }
    }
  }
  img{width: 100%;float: left;}
</style>